<template>
  <BaseCharts ref="baseChartsRef"
              :options="options"
              :autoRander="autoRander"
              :autoNumber="autoNumber"
              :height="height"
              @legendselectchanged="legendselectchanged">
  </BaseCharts>
</template>
  
  <script setup>
import { computed, ref, watch, onMounted } from "vue";
import { useEchart } from "@/hooks/useEchart.js";
import { fontSize } from "@/utils/rem/rem.js";
import { getChartTootipFormatter } from "@/utils/formatter.js";
import BaseCharts from "@/components/echarts/vpt-base-chart/index.vue";
import { color } from "echarts";

const baseChartsRef = ref(null);
const fontColor = "rgba(255,255,255, 0.5)";

const props = defineProps({
  pieDate: { type: Array, default: [] },
});




// 使用hooks
useEchart(getOptions);
let legendSelect = ref({});
// const legendselectchanged = (event) => {
//   legendSelect.value = event.selected;
//   updateSeries();
// };
onMounted(() => {
  getOptions();
});

const datas = computed(() => {
  return props.pieDate;
});

const options = computed(() => {
  return {
    tooltip: {
      trigger: "item",
      borderColor: "#fff",
      extraCssText:
        "background: #fff", //渐变颜色
      textStyle: {
        fontFamily: "HarmonyOS_SansSC_Medium",
      },
      formatter: (item) => {
        return getChartTootipFormatter(
          [item],
          { itemKey: "name", valueKey: "value" },
          false
        );
      },
    },
    legend: {
      orient: 'vertical',
      right: '-5%',
      top: 'center',
      itemWidth: fontSize(16),
      itemHeight: fontSize(16),
      textStyle: {
        color: '#1D2129',
        fontSize: fontSize(14),
        fontFamily: "HarmonyOS_SansSC_Medium",
      },
      formatter: function (name) {

        let info = datas.value.find((item) => item.name == name);
        return name + "             " + info.value + "  (" + info.percentage + ")" + "     ";
      }

    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        center: ['40%', '50%'],
        data: datas.value,
        label: {
          show: false, // 设置为 false 以隐藏标签
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
});

function getOptions () {
  // options.value = 
}
function arraysEqual (a, b) {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}
async function updateSeries () {
  try {
    // const chartInstance = await getEchartsInstance();
    // if (chartInstance) {
    //   const newChartOption = chartInstance.getOption();
    //   newChartOption.legend[0].data = [...props.legendData];
    //   newChartOption.xAxis[0].data = props.xAxisData;
    //   // 遍历 series 更新 data
    //   (newChartOption.series[0].data = props.chartData),
    //     (newChartOption.legend[0].selected = legendSelect.value);
    //   // 更新 series 部分
    //   chartInstance.setOption(newChartOption, false);
    // }
  } catch (error) {
    // console.error("Failed to update chart:", error);
  }
}

function getEchartsInstance () {
  return new Promise((resolve) => {
    baseChartsRef.value.commonFunc((instance) => resolve(instance));
  });
}

defineExpose({
  reloadEchart: () => {
    baseChartsRef.value.reloadEchart();
  },
});
  </script>
  